<!--
 * @Author: Wei yangming
 * @Date: 2021-07-04 20:36:06
 * @LastEditTime: 2021-07-07 10:36:58
 * @LastEditors: Please set LastEditors
 * @Description: 头部组件
 * @FilePath: \xxtx\src\views\components\Header.vue
-->

<template>
  <div class="header">
    <div class="wrapper">
      <div class="logo">图书</div>
      <div class="title" @click="toHome">太原理工大学图书借阅</div>
      <div class="phone" @click="tolian">联系我们</div>
    </div>
  </div>
</template>

<script>
export default {
   methods:{
       toHome(){
           this.$router.push({
               path:"/"
           })
       },
         tolian(){
         this.$router.push({
           path:"/lianxiwomen"
         })
       }
   }
}
</script>

<style lang="scss" scoped>
// 居中容器
.wrapper {
  width: 90%;
  margin: 0 auto; //左右居中
}
// 头部
.header {
    box-shadow: 0 5px 5px rgb(168, 209, 209);
  padding: 5px 0;
  .wrapper::after {
    clear: both;
    content: "";
    display: block;
  }
  .title {
    font-size: 20px;
    line-height: 2em;
    font-weight: bold;
  }
  .logo,
  .title,
  .phone {
    height: 60px;
    line-height: 60px;
    cursor: pointer;// 光标放上去变成手型
  }
  .logo {
    width: 60px;
    border-radius: 50%;
    background-color: #4fbc8d;
    color: #fff;
    text-align: center;
    float: left;
  }
  .title {
    float: left;
    padding: 0 1em;
  }
  .phone {
    float: right;
  }
}
</style>
